import React, {Fragment} from 'react'
import {Button, Card, Col, DatePicker, Form, Input, InputNumber, Row, Select} from 'antd'
import DescriptionList from 'components/DescriptionList'
import AddressModal from './AddressModal'
import moment from 'moment'

const {Option} = Select
const {Description} = DescriptionList
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
}

class DeliverInfo extends React.Component {

  handleSelect = (data) => {
    const {updateAddr} = this.props
    updateAddr(data)
  }

  selectExpress (_, {value, children}) {
    const {dispatch} = this.props
    dispatch({
      type: 'createOrder/updateState',
      payload: {
        expressTypeId: value,
        expressTypeName: children,
      },
    })
  }

  handleChange (val, name) {
    const {dispatch} = this.props
    if (name) {
      const payload = {}
      payload[name] = val
      dispatch({
        type: 'createOrder/updateState',
        payload,
      })
    } else {
      const {handleExpressFeeChange} = this.props
      handleExpressFeeChange(val)
    }
  }

  render () {
    const {
      current = {},
      loading,
      depotList,
      curDepot,
      addressList,
      expressType,
      modalVisible,
      onSelect,
      dispatch,
      expressFee,
      curAddr = {},
      form: {
        getFieldDecorator,
      },
    } = this.props
    const {customer = {}, expressTypeId, depotId, requireSendTime} = current

    const modalProps = {
      list: addressList,
      customerId: customer.id,
      loading,
      visible: modalVisible,
      width: 1080,
      maskClosable: false,
      footer: null,
      title: '选择发货地址',
      wrapClassName: 'vertical-center-modal',
      onOk: undefined,
      onCancel () {
        dispatch({
          type: 'createOrder/hideAddrModal',
        })
      },
      handleSelect: this.handleSelect,
      onSave (data) {
        let type = 'updateAddr'
        const newData = {...data}
        if (data.id.indexOf("NEW_TMP_ID") >= 0) {
          type = 'saveAddr'
          delete newData.id
        }
        delete newData.editable
        delete newData.dmobile
        dispatch({
          type: `customerDetail/${type}`,
          payload: newData,
        }).then(() => {
          dispatch({
            type: 'createOrder/queryAddress',
            payload: {customerId: customer.id},
          })
        })
      },
    }

    return (
      <Fragment>
        <Card title={'发货信息'} style={{marginTop: 24}}>
          <Button onClick={onSelect} type="primary" style={{marginLeft: '4%', marginBottom: 16}}>
            选择其他地址
          </Button>
          <Row gutter={24}>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="快递方式">
                {getFieldDecorator('express', {initialValue: expressTypeId ? expressTypeId : undefined})(
                  <Select
                    onSelect={(value, {props}) => this.selectExpress(value, props)}
                    allowClear
                    placeholder={'发货快递'}
                    style={{width: '50%'}}
                    size={'small'}>
                    {expressType.map(_ => <Option value={_.id}>{_.name}</Option>)}
                  </Select>)}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="运费">
                {getFieldDecorator('expressFee', {initialValue: expressFee})(
                  <InputNumber
                    onChange={val => this.handleChange(val)}
                    placeholder={'请填写运费'} style={{width: '50%'}}
                    size={'small'}/>)}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="要求发货时间">
                {getFieldDecorator('requireSendTime', {initialValue: requireSendTime ? moment(requireSendTime, 'yyyy-MM-dd HH:mm:ss') : undefined})(
                  <DatePicker style={{width: '50%'}} onChange={val => this.handleChange(val, 'requireSendTime')}
                              placeholder="发货时间" size={'small'}/>)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="发货仓库">
                {getFieldDecorator('depot',
                  {
                    initialValue: curDepot.id ? curDepot.id : depotId,
                    rules: [{required: true, message: '请选择发货仓库'}],
                  })(
                  <Select
                    disabled
                    allowClear
                    placeholder={'发货仓库'}
                    style={{width: '50%'}}
                    size={'small'}>
                    {depotList.map(_ => <Option value={_.id}>{_.name}</Option>)}
                  </Select>)}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="收货人">
                {getFieldDecorator('receiver', {
                  initialValue: curAddr.receiver,
                  rules: [{required: true, message: '请填写收货人名称'}],
                })(<Input disabled placeholder={'收货人'} style={{width: '50%'}} size={'small'}/>)}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} style={{marginBottom: 0}} label="联系电话">
                {getFieldDecorator('contact', {
                  initialValue: curAddr.mobile,
                  rules: [{required: true, message: '请填写收货人联系电话'}],
                })(<Input disabled
                  placeholder={'联系电话'} style={{width: '50%'}}
                  size={'small'}/>)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <FormItem labelCol={{span: 2}} style={{marginBottom: 0}} wrapperCol={{span: 20}} label="详细地址">
                {getFieldDecorator('address', {
                  initialValue: curAddr.provinceName ? (curAddr.provinceName + curAddr.cityName + curAddr.areaName + curAddr.address) : undefined,
                  rules: [{required: true, message: '请填写详细收货地址'}],
                })(<Input disabled placeholder={'发货地址'} style={{width: '35%'}} size={'small'}/>)}
              </FormItem>
            </Col>
          </Row>
        </Card>
        {modalVisible && <AddressModal {...modalProps}/>}
      </Fragment>
    )
  }
}

export default DeliverInfo
